<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数与普通函数的区别</title>
</head>
<body>
<script>

    //箭头函数的出现就是为了解决ES5的function中this指向混乱的问题
    //箭头函数没有自己的this,它的this来自上级作用域(父级上下文)
    //箭头函数的this不会在调用的时候被改变, 因为在箭头函数声明的时候他的this就已经被永久的确定了

//一、箭头函数是匿名函数，不能作为构造函数，不能使用new
{
    let Fn = ()=>{

    };
//    let fn1 = new Fn()//Uncaught TypeError: Fn is not a constructor
}

//二、箭头函数内没有arguments，可以用展开运算符...解决
    {
        function fn1() {
            console.log(arguments)//likeArray
        }
        fn1(1,2,3,4,5);

        let fn2 = (...args)=>{
//            console.log(arguments)//Uncaught ReferenceError: arguments is not defined
            console.log(args)//Array
        };
        fn2(1,2,3,4,5)
    }


//三、箭头函数的this，始终指向父级上下文
{
    var a=200;

    let obj = {
        a: 100,
        fn: function(){   //es5 谁调用，this指向谁
            console.log(this.a);
        },
        foo: ()=>{   //  es6箭头函数的this指向父级(obj)上下文。
            console.log(this.a)
        }
    };
    obj.fn();// 100;
    obj.foo();//200
}
//四、箭头函数不能通过call() 、 apply() 、bind()方法直接修改它的this指向
//    (call、aaply、bind会默认忽略第一个参数，但是可以正常传参)
    {
//        let fn = (num)=>{};
//        fn(1)
//        let fn1 = fn.bind(null,1);
//        fn1()
    }
//五、箭头函数没有原型属性
    let a1 = ()=>{

    };
    function a2() {

    }
    console.log(a1.prototype);
    console.log(a2.prototype);
</script>
</body>
</html>